<template>
  <div class="pagestyle">
    <div class="top">
      <span class="title">实时异常</span>
      <el-button class="btn" type="primary" link @click="qiehuan">
        <el-icon>
          <svg-icon class-name="search-icon" icon-class="Chart switching" />
        </el-icon>
        <span style="margin-left: 5px">列表</span>
      </el-button>
    </div>
    <div class="bottom">
      <!-- 分站 -->
      <div class="fenzhanyichang">
        <el-card>
          <div class="fenzhanItem">
            <div class="itemTitle">
              <div class="left">
                <img src="@/assets/images/图标.svg" alt="" />
                <span class="t1">分站异常({{ state.fenzhanData.length }})</span>
              </div>
              <div class="right">
                <!-- <span class="r1">全部 </span> -->
                <el-select
                  @change="fenzhanChange"
                  v-model="state.fenzhanType"
                  style="width: 100px"
                >
                  <el-option label="网络故障" value="网络故障"></el-option>
                  <el-option label="分站故障" value="分站故障"></el-option>
                </el-select>
                <!-- <span class="r2">
                  <img
                    src="@/assets/images/home/搜索.svg"
                    alt=""
                    style="margin: 0"
                  />
                </span>
                <span class="r3">
                  <img src="@/assets/images/home/展开菜单.svg" alt="" />
                </span> -->
              </div>
            </div>
            <div class="items">
              <div
                class="c1"
                v-for="(val, idx) in state.fenzhanData"
                :key="idx"
              >
                <div class="c1-top-dianyuan">
                  <!-- :class="{'c1-top': idx != 0,'c1-top-dianyuan': idx == 0}" -->
                  <img src="@/assets/images/keranqiti/分站异常.png" alt="" />
                  <div class="c1-top-right">
                    <div class="c1-top-right-1">
                      <span class="right-1-left">{{
                        val.substationNumber
                      }}</span>
                      <span class="right-1-right">{{
                        val.acquisitionBoardTypeName
                      }}</span>
                    </div>
                    <div class="c1-top-right-2">
                      <span class="b1">{{ val.errorType }}</span>
                      <span class="b2">{{ val.address }}</span>
                    </div>
                  </div>
                </div>
                <!-- <div v-if="idx != 0" class="c1-bottom">
                  <span class="bottom-1">{{ 3 }}</span>
                  <span class="bottom-2">{{ 3 }}</span>
                </div> -->
                <div class="c1-bottom-dianyuan">
                  <!-- <div class="dianyuan-1">
                    <span class="dianyuan-1-1">{{ 3 }}</span>
                    <span class="dianyuan-1-2">{{ 3 }}</span>
                  </div> -->
                  <div class="dianyuan-2">
                    <!-- <span class="dianyuan-2-1">{{ 3 }}</span> -->
                    <span class="">开始时间：{{ val.startTime }}</span>
                    <span class="dianyuan-2-2"
                      >故障时长：{{ val.durationTime }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <!-- 测点 -->
      <div class="cedianyichang">
        <el-card>
          <div class="fenzhanItem">
            <div class="itemTitle">
              <div class="left">
                <img src="@/assets/images/图标.svg" alt="" />
                <span class="t1">测点异常({{ state.cedianData.length }})</span>
              </div>
              <div class="right">
                <!-- <span class="r1">全部 </span> -->
                <el-select
                  @change="cedianChange"
                  v-model="state.cedianType"
                  style="width: 100px"
                >
                  <el-option label="报警" value="报警"></el-option>
                  <el-option label="故障" value="故障"></el-option>
                  <el-option label="断电" value="断电"></el-option>
                </el-select>
                <!-- <span class="r2">
                  <img
                    src="@/assets/images/home/搜索.svg"
                    alt=""
                    style="margin: 0"
                  />
                </span>
                <span class="r3">
                  <img src="@/assets/images/home/展开菜单.svg" alt="" />
                </span> -->
              </div>
            </div>
            <div class="items">
              <div class="c1" v-for="(val, idx) in state.cedianData" :key="idx">
                <div class="c1-top">
                  <img src="@/assets/images/keranqiti/测点异常.png" alt="" />
                  <div class="c1-top-right">
                    <div class="c1-top-right-1">
                      <span class="right-1-left">模拟量</span>
                      <span class="right-1-right">{{ val.pointNumber }}</span>
                      <span class="right-1-right">{{ val.installPlace }}</span>
                    </div>
                    <div class="c1-top-right-2">
                      <span class="b1">{{ val.statusName }}</span>
                      <span class="b2">{{ val.pointName }}</span>
                    </div>
                  </div>
                  <!-- <div  class="c1-top-right-dianyuan">
                    {{ 333 }}
                  </div> -->
                  <span class="c1-top-right-3">
                    <span
                      style="color: rgba(245, 108, 108, 1); margin-right: 5px"
                      >{{ val.realTimeValue }}</span
                    >
                    <span>ppm</span>
                  </span>
                </div>
                <!-- <div v-if="idx != 2" class="c1-bottom">
                  <span class="bottom-1">{{ item.n4 }}</span>
                  <span class="bottom-2">{{ item.n5 }}</span>
                </div> -->
                <div class="c1-bottom-dianyuan">
                  <!-- <div class="dianyuan-1">
                    <span class="dianyuan-1-1">{{ 111 }}</span>
                    <span class="dianyuan-1-2">{{ 111 }}</span>
                  </div> -->
                  <div class="dianyuan-2">
                    <span class="">开始时间：{{ val.startTime }}</span>
                    <span class="dianyuan-2-2"
                      >故障时长：{{ val.durationTime }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <!-- 电源 -->
      <div class="dianyuanyichang">
        <el-card>
          <div class="fenzhanItem">
            <div class="itemTitle">
              <div class="left">
                <img src="@/assets/images/图标.svg" alt="" />
                <span class="t1"
                  >电源异常({{ state.dianyuanData.length }})</span
                >
              </div>
              <div class="right">
                <!-- <span class="r1">全部 </span> -->
                <el-select
                  @change="dianyuanChange"
                  v-model="state.dianyuanType"
                  style="width: 100px"
                >
                  <el-option label="主电欠压" value="主电欠压"></el-option>
                  <el-option label="备电欠压" value="备电欠压"></el-option>
                  <el-option label="备电断路" value="备电断路"></el-option>
                  <el-option label="备电短路" value="备电短路"></el-option>
                </el-select>
                <!-- <span class="r2">
                  <img
                    src="@/assets/images/home/搜索.svg"
                    alt=""
                    style="margin: 0"
                  />
                </span>
                <span class="r3">
                  <img src="@/assets/images/home/展开菜单.svg" alt="" />
                </span> -->
              </div>
            </div>
            <div class="items">
              <div
                class="c1"
                v-for="(val, idx) in state.dianyuanData"
                :key="idx"
              >
                <div class="c1-top-dianyuan">
                  <div class="c1-top-1">
                    <img src="@/assets/images/keranqiti/电源异常.png" alt="" />
                    <span class="labels">{{ val.label }}</span>
                  </div>
                  <div class="c1-top-right">
                    <div class="c1-top-right-2">
                      <div class="b1" v-if="val.errorType">{{ val.errorType }}</div>
                      <div class="b2">
                        <div>开始时间：{{ val.startTime }}</div>
                        <div class="dianyuan-2">
                          故障时长：{{ val.durationTime }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- <div class="c1-bottom-dianyuan">
                  <div>开始时间：{{ val.startTime }}</div>
                  <div class="dianyuan-2">故障时长：{{ val.durationTime }}</div>
                </div> -->
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script setup>
import fenhzanImg from "@/assets/images/keranqiti/分站异常.png";
import cedianImg from "@/assets/images/keranqiti/测点异常.png";
import dianyuan from "@/assets/images/keranqiti/电源异常.png";
import axios from "@/utils/request";
import { onMounted } from "vue";

const emit = defineEmits(["qiehuan"]);
//图表切换
const qiehuan = () => {
  emit("qiehuan");
};
const state = reactive({
  timeId: null, //定时器id
  fenzhanData: [], //分站数据
  cedianData: [], //测点数据
  dianyuanData: [], //电源数据
  fenzhanType: "网络故障", //分站类型
  cedianType: "报警", //测点类型
  dianyuanType: "主电欠压", //电源类型
});
const getFenzhanList = (value) => {
  //分站
  let obj = {
    pageNum: 1,
    pageSize: 1000,
  };
  if (value) {
    obj = value;
  }else{
    obj={
      pageNum: 1,
      pageSize: 1000,
    }
  }
  axios.post("/realTime/error/substation/list", obj).then((res) => {
    if (res.rows) {
      state.fenzhanData = res.rows;
    }
  });
};
const getCedianList = (value) => {
  //测点
  let obj = {
    pageNum: 1,
    pageSize: 1000,
  };
  if (value) {
    obj = value;
  }else{
    obj={
      pageNum: 1,
      pageSize: 1000,
    }
  }
  axios.post("/realTime/error/point/list", obj).then((res) => {
    if (res.rows) {
      state.cedianData = res.rows;
    }
  });
};
const getDianyuanList = (value) => {
  //电源
  let obj = {
    pageNum: 1,
    pageSize: 1000,
  };
  if (value) {
    obj = value;
  }else{
    obj={
      pageNum: 1,
      pageSize: 1000,
    }
  }
  axios.post("/realTime/error/power/list", obj).then((res) => {
    if (res.rows) {
      state.dianyuanData = res.rows;
    }
  });
};
//分站搜索
const fenzhanChange = (val) => {
  let obj = {
    pageNum: 1,
    pageSize: 1000,
  };
  if (val == "网络故障") {
    obj.networkError = true; //网络故障
    obj.substationError = false; //分站故障
  } else if (val == "分站故障") {
    obj.networkError = false; //网络故障
    obj.substationError = true; //分站故障
  }
  getFenzhanList(obj);
};
//测点搜索
const cedianChange = (val) => {
  let obj = {
    pageNum: 1,
    pageSize: 1000,
  };
  if (val == "报警") {
    obj.alarm = true; //报警
    obj.fault = false; //故障
    obj.powerOff = false; //断电
  } else if (val == "故障") {
    obj.alarm = false; //报警
    obj.fault = true; //故障
    obj.powerOff = false; //断电
  } else if (val == "断电") {
    obj.alarm = false; //报警
    obj.fault = false; //故障
    obj.powerOff = true; //断电
  }
  getCedianList(obj);
};
//电源搜索
const dianyuanChange = (val) => {
  let obj = {
    pageNum: 1,
    pageSize: 1000,
  };
  if (val == "主电欠压") {
    obj.mainUnderVoltage = true; //主电欠压
    obj.backupUnderVoltage = false; //备电欠压
    obj.backupOpenCircuit = false; //备电断路
    obj.backupShortCircuit = false; //备电短路
  } else if (val == "备电欠压") {
    obj.mainUnderVoltage = false; //主电欠压
    obj.backupUnderVoltage = true; //备电欠压
    obj.backupOpenCircuit = false; //备电断路
    obj.backupShortCircuit = false; //备电短路
  } else if (val == "备电断路") {
    obj.mainUnderVoltage = false; //主电欠压
    obj.backupUnderVoltage = false; //备电欠压
    obj.backupOpenCircuit = true; //备电断路
    obj.backupShortCircuit = false; //备电短路
  } else if (val == "备电短路") {
    obj.mainUnderVoltage = false; //主电欠压
    obj.backupUnderVoltage = false; //备电欠压
    obj.backupOpenCircuit = false; //备电断路
    obj.backupShortCircuit = true; //备电短路
  }
  getDianyuanList(obj);
};

onMounted(() => {
  getFenzhanList();
  getCedianList();
  getDianyuanList();
   // 设置定时器
   state.timeId = setInterval(function () {
    getFenzhanList();
  getCedianList();
  getDianyuanList();
    console.log("实时异常数据刷新代码每隔5秒执行一次");
  }, 5000);
});
onUnmounted(() => {
  clearInterval(state.timeId);
})
</script>
<style scoped lang="scss">
.top {
  margin: 20px 0;
  .title {
    font-size: 16px;
    font-weight: bold;
    color: rgba(64, 158, 255, 1);
    margin-right: 15px;
  }
}
::v-deep .el-card__body {
  padding: 15px !important;
}
.bottom {
  display: flex;
  justify-content: space-between;
  .fenzhanyichang {
    width: 33%;
    .fenzhanItem {
      height: 670px;

      .itemTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          .t1 {
            font-weight: bold;
            font-size: 16px;
            margin-left: 10px;
          }
        }
        .right {
          display: flex;
          align-items: center;
          .r1 {
            font-size: 14px;
            .icon {
              margin-left: 5px;
            }
          }
          .r2 {
            margin: 0 15px;
          }
          .r3 {
            img {
              transform: rotate(-180deg);
            }
          }
        }
      }
      .items {
        overflow-y: auto;
        height: 646px;
        margin-top: 10px;
        .c1 {
          margin-bottom: 10px;
          width: 100%;
          height: 80px;
          opacity: 1;
          border-radius: 2.82px;
          background: rgba(247, 247, 247, 1);
          padding: 5px;
          .c1-top {
            display: flex;
            align-items: center;
            margin-top: 8px;
            .c1-top-right {
              // position: relative;
              width: 100%;
              margin-left: 10px;
              font-size: 12px;
              .c1-top-right-1 {
                color: rgba(62, 70, 79, 1);
                .right-1-left {
                  margin-right: 5px;
                  background-color: #deedfd;
                  color: rgba(64, 158, 255, 1);
                  padding: 2px 5px;
                  border-radius: 2px;
                  width: 50px;
                }
              }
              .c1-top-right-2 {
                margin-top: 5px;
                .b1 {
                  text-align: center;
                  color: #fff;
                  background: rgba(245, 108, 108, 1);
                  padding: 2px 5px;
                  border-radius: 2px;
                }
                .b2 {
                  margin-left: 5px;
                }
              }
              .c1-top-right-3 {
                position: absolute;
              }
            }
            .c1-top-right-dianyuan {
              font-weight: bold;
              font-size: 14px;
              margin-left: 10px;
            }
          }
          .c1-top-dianyuan {
            display: flex;
            align-items: center;
            margin-top: 8px;
            .c1-top-right {
              // position: relative;
              width: 100%;
              margin-left: 10px;
              font-size: 12px;
              .c1-top-right-1 {
                color: rgba(62, 70, 79, 1);
                .right-1-left {
                  font-weight: 700;
                }
                .right-1-right {
                  margin-left: 5px;
                }
              }
              .c1-top-right-2 {
                margin-top: 5px;
                font-size: 10px;
                .b1 {
                  color: #fff;
                  background: rgba(245, 108, 108, 1);
                  padding: 2px 5px;
                  border-radius: 2px;
                }
                .b2 {
                  margin-left: 5px;
                  font-weight: 700;
                }
              }
              .c1-top-right-3 {
                position: absolute;
              }
            }
            .c1-top-right-dianyuan {
              font-weight: bold;
              font-size: 14px;
              margin-left: 10px;
            }
          }
          .c1-bottom {
            font-size: 10px;
            display: flex;
            justify-content: space-between;
            margin-top: 26px;
            .bottom-1 {
              color: rgba(62, 70, 79, 1);
            }
            .bottom-2 {
              color: rgba(245, 108, 108, 1);
            }
          }
          .c1-bottom-dianyuan {
            font-size: 10px;
            margin-top: 5px;
            .dianyuan-1 {
              .dianyuan-1-1 {
                width: 50px;
                display: inline-block;
                text-align: center;
                margin-right: 10px;
                background-color: #deedfd;
                color: rgba(64, 158, 255, 1);
                padding: 2px 5px;
                font-size: 10px;
                border-radius: 2px;
              }
              .dianyuan-1-2 {
                color: rgba(62, 70, 79, 1);
              }
            }
            .dianyuan-2 {
              margin-top: 10px;
              display: flex;
              justify-content: space-between;
              .dianyuan-2-1 {
                width: 50px;
                display: inline-block;
                text-align: center;
                margin-right: 10px;
                background-color: #f56c6c;
                color: #fff;
                padding: 2px 5px;
                font-size: 10px;
                border-radius: 2px;
              }
              .dianyuan-2-2 {
                color: rgba(245, 108, 108, 1);
              }
            }
          }
        }
      }
    }
  }

  .cedianyichang {
    width: 33%;
    .fenzhanItem {
      height: 670px;

      .itemTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          .t1 {
            font-weight: bold;
            font-size: 16px;
            margin-left: 10px;
          }
        }
        .right {
          display: flex;
          align-items: center;
          .r1 {
            font-size: 14px;
            .icon {
              margin-left: 5px;
            }
          }
          .r2 {
            margin: 0 15px;
          }
          .r3 {
            img {
              transform: rotate(-180deg);
            }
          }
        }
      }
      .items {
        overflow-y: auto;
        height: 646px;
        margin-top: 10px;
        .c1 {
          margin-bottom: 10px;
          width: 100%;
          height: 90px;
          opacity: 1;
          border-radius: 2.82px;
          // background: rgba(247, 247, 247, 1);
          border-bottom: 1px solid #f0f0f0;
          padding: 5px;
          .c1-top {
            display: flex;
            align-items: center;
            margin-top: 8px;
            .c1-top-right {
              // position: relative;
              width: 100%;
              margin-left: 10px;
              font-size: 12px;
              .c1-top-right-1 {
                color: rgba(62, 70, 79, 1);
                .right-1-left {
                  margin-right: 5px;
                  background-color: #deedfd;
                  color: rgba(64, 158, 255, 1);
                  padding: 2px 5px;
                  border-radius: 2px;
                  width: 50px;
                }
                .right-1-right {
                  font-weight: 700;
                }
              }
              .c1-top-right-2 {
                margin-top: 5px;
                .b1 {
                  text-align: center;
                  color: #fff;
                  background: rgba(245, 108, 108, 1);
                  padding: 2px 5px;
                  border-radius: 2px;
                }
                .b2 {
                  margin-left: 5px;
                }
              }
              .c1-top-right-3 {
                position: absolute;
              }
            }
            .c1-top-right-dianyuan {
              font-weight: bold;
              font-size: 14px;
              margin-left: 10px;
            }
          }
          .c1-top-dianyuan {
            display: flex;
            align-items: center;
            margin-top: 8px;
            .c1-top-right {
              // position: relative;
              width: 100%;
              margin-left: 10px;
              font-size: 12px;
              .c1-top-right-1 {
                color: rgba(62, 70, 79, 1);
                .right-1-left {
                  font-weight: 700;
                }
                .right-1-right {
                  margin-left: 5px;
                }
              }
              .c1-top-right-2 {
                margin-top: 5px;
                font-size: 10px;
                .b1 {
                  color: #fff;
                  background: rgba(245, 108, 108, 1);
                  padding: 2px 5px;
                  border-radius: 2px;
                }
                .b2 {
                  margin-left: 5px;
                  font-weight: 700;
                }
              }
              .c1-top-right-3 {
                position: absolute;
              }
            }
            .c1-top-right-dianyuan {
              font-weight: bold;
              font-size: 14px;
              margin-left: 10px;
            }
          }
          .c1-bottom {
            font-size: 10px;
            display: flex;
            justify-content: space-between;
            margin-top: 26px;
            .bottom-1 {
              color: rgba(62, 70, 79, 1);
            }
            .bottom-2 {
              color: rgba(245, 108, 108, 1);
            }
          }
          .c1-bottom-dianyuan {
            font-size: 10px;
            margin-top: 5px;
            .dianyuan-1 {
              .dianyuan-1-1 {
                width: 50px;
                display: inline-block;
                text-align: center;
                margin-right: 10px;
                background-color: #deedfd;
                color: rgba(64, 158, 255, 1);
                padding: 2px 5px;
                font-size: 10px;
                border-radius: 2px;
              }
              .dianyuan-1-2 {
                color: rgba(62, 70, 79, 1);
              }
            }
            .dianyuan-2 {
              margin-top: 10px;
              display: flex;
              justify-content: space-between;
              .dianyuan-2-1 {
                width: 50px;
                display: inline-block;
                text-align: center;
                margin-right: 10px;
                background-color: #f56c6c;
                color: #fff;
                padding: 2px 5px;
                font-size: 10px;
                border-radius: 2px;
              }
              .dianyuan-2-2 {
                color: rgba(245, 108, 108, 1);
              }
            }
          }
        }
      }
    }
  }
  .dianyuanyichang {
    width: 33%;
    .fenzhanItem {
      height: 670px;
      .itemTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          .t1 {
            font-weight: bold;
            font-size: 16px;
            margin-left: 10px;
          }
        }
        .right {
          display: flex;
          align-items: center;
          .r1 {
            font-size: 14px;
            .icon {
              margin-left: 5px;
            }
          }
          .r2 {
            margin: 0 15px;
          }
          .r3 {
            img {
              transform: rotate(-180deg);
            }
          }
        }
      }
      .items {
        overflow-y: auto;
        height: 646px;
        // margin-top: 10px;
        .c1 {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          width: 100%;
          height: 100px;
          opacity: 1;
          border-radius: 2.82px;
          // background: rgba(247, 247, 247, 1);
          border-bottom: 1px solid #f0f0f0;
          padding: 5px;
          .c1-top-dianyuan {
            // margin-top: 8px;
            .c1-top-1 {
              display: flex;
              align-items: center;
              img {
                margin-left: 12px;
                width: 40px;
                height: 40px;
                margin-bottom: 10px;
              }
              .labels {
                // display: inline-block;
                font-size: 12px;
                font-weight: 700;
                margin-bottom: 15px;
                margin-left: 22px;
              }
            }
            .c1-top-right {
              // position: relative;
              width: 100%;
              margin-left: 10px;
              font-size: 12px;
              .c1-top-right-1 {
                color: rgba(62, 70, 79, 1);
                .right-1-left {
                  font-weight: 700;
                }
                .right-1-right {
                  margin-left: 5px;
                }
              }
              .c1-top-right-2 {
                // margin-top: 5px;
                display: flex;
                align-items: center;
                font-size: 10px;
                .b1 {
                  height: 20px;
                  color: #fff;
                  background: rgba(245, 108, 108, 1);
                  padding: 2px 5px;
                  border-radius: 2px;
                }
                .b2 {
                  margin-left: 15px;
                  // font-weight: 700;
                }
              }
              .c1-top-right-3 {
                position: absolute;
              }
            }
            // .c1-top-right-dianyuan {
            //   font-weight: bold;
            //   font-size: 14px;
            //   margin-left: 10px;
            // }
          }
          // .c1-bottom {
          //   font-size: 10px;
          //   display: flex;
          //   justify-content: space-between;
          //   margin-top: 26px;
          //   .bottom-1 {
          //     color: rgba(62, 70, 79, 1);
          //   }
          //   .bottom-2 {
          //     color: rgba(245, 108, 108, 1);
          //   }
          // }
          // .c1-bottom-dianyuan {
          //   font-size: 10px;
          //   margin-top: 5px;
          //   .dianyuan-1 {
          //     .dianyuan-1-1 {
          //       width: 50px;
          //       display: inline-block;
          //       text-align: center;
          //       margin-right: 10px;
          //       background-color: #deedfd;
          //       color: rgba(64, 158, 255, 1);
          //       padding: 2px 5px;
          //       font-size: 10px;
          //       border-radius: 2px;
          //     }
          //     .dianyuan-1-2 {
          //       color: rgba(62, 70, 79, 1);
          //     }
          //   }
          //   .dianyuan-2 {
          //     margin-top: 10px;
          //     display: flex;
          //     justify-content: space-between;
          //     .dianyuan-2-1 {
          //       width: 50px;
          //       display: inline-block;
          //       text-align: center;
          //       margin-right: 10px;
          //       background-color: #f56c6c;
          //       color: #fff;
          //       padding: 2px 5px;
          //       font-size: 10px;
          //       border-radius: 2px;
          //     }
          //     .dianyuan-2-2 {
          //       color: rgba(245, 108, 108, 1);
          //     }
          //   }
          // }
        }
      }
    }
  }
}
</style>